<template>
	<view class="tui-product__item" @tap="detail(item)">
		<view class="tui-product__img">
			<image :src="ossUrl + (item&&item.releaseImgs&&item.releaseImgs[0]||'')" class="tui-product__img" ></image>
			<view  class="tagC" v-if="isDate">
				<tui-icon name="clock" :size="20" unit="rpx" color="#fff" margin="0 8rpx 0 0"></tui-icon>
				<text>{{getDate(item.createTime)}}</text>
			</view>
			<view class="icon_yincang" v-if="isMyNote"  @tap.stop="hideDynamicTap(item)">
				<tui-icon :name="dynamicStatus ? 'seen':'unseen'" color="#FFF" size="30rpx"></tui-icon>
			</view>
		</view>
		<view class="tui-product__content">
			<view class="tui-product__title">{{ item.releaseContent || '' }}</view>
			<view class="thorui-flex__between">
				<view style="display: flex;align-items: center;font-size: 28rpx;color: gray;" v-if="!isMyNote">
					<image v-if="!item.avatar"
						src="https://dn-coding-net-production-pp.codehub.cn/270e73de-2548-406b-9e1c-c0c8481dff90.png"
						class="u-nickname__img" ></image>
					<image v-else :src="ossUrl +item.avatar" class="u-nickname__img" ></image>
					{{item.nickname}}
				</view>
				<view class="thorui-flex__between" v-if="!isMyNote">
					<view style="display: flex;align-items: center;font-size: 28rpx;color: gray;margin-right:20rpx;" v-if="isComment">
						<image src="/static/user/icon_pinglun@2x.png" class="icon-small"></image>
						{{item.commentNumber}}
					</view>
					<view style="display: flex;align-items: center;font-size: 28rpx;color: gray;" >
						<tui-icon :name="like==1?'like':'like-fill'" :color="like==1?'':'#2FD7D3'" size="30rpx" margin="0 6rpx 0 0"></tui-icon>
						<text :style="like==1?'':'color: #2FD7D3'">{{likeNum}}</text>
					</view>
				</view>
				<view class="thorui-flex__between" style="width: 100%;" v-if="isMyNote">
					<tui-text :text="getDate(item.createTime)" color="#999" size="28"></tui-text>
					<view>
						<image src="/static/user/icon_del@2x.png" class="icon-small" @tap.stop="del(item)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMyAttentionList,collectDynamic} from "@/http/api/index/index.js"
	import {hideDynamic} from "@/http/api/dynamic/dynamic.js" 
	import Cache from '@/utils/cache'
	export default {
		name: 'DynamicItem',
		emits: ['clickDetail','delDynamic'],
		props: {
			//数据obj
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			},
			// 是否显示日期
			isDate: {
				type: Boolean,
				default: false
			},
			// 是否显示评论
			isComment: {
				type: Boolean,
				default: true
			},
			// 是否显示我的笔记
			isMyNote: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				like: 1,// 当前用户是否收藏
				likeNum: 0,// 收藏数量
				dynamicStatus: true // 动态状态（true 显示；false 隐藏）
			};
		},
		created() {
			this.like = this.item.isCollection;
			this.likeNum = this.item.quantity;
			this.dynamicStatus = this.item.status==0?true:false;// 状态：0显示，1隐藏，2待审核，3驳回
		},
		methods: {
			getDate(commentTime){
				if(commentTime){
					return commentTime.substring(0, 10);
				} 
			},
			detail(dynamic) {
				this.$emit("clickDetail", {
					dynamicId:dynamic.id
				})
			},
			del(dynamic) {
				this.$emit("delDynamic", {
					dynamicId:dynamic.id
				})
			},
			// 收藏、取消收藏动态
			likeTap() {
				const token =Cache.get('access_token')
				if(token){
					this.like = this.like==1 ? 1 : 0;
					this.likeNum = this.like==0 ? ++this.likeNum : --this.likeNum;
					this.setUpdateLikes()
				}else{
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			setUpdateLikes(){
				collectDynamic({
					id: this.item.id,
					userId: Cache.get("userId"),
					queryType: this.like?"1":"2" //queryType  1收藏，2取消
				}).then(res => {
					if (res.code != 200) {
						 this.$utils.toast(res.msg);
					}
				}).catch(res => {
					this.$utils.toast(res);
				})
			},
			// 隐藏显示动态
			hideDynamicTap(dynamic){
				// 状态：0显示，1隐藏，2待审核，3驳回
				let status= this.dynamicStatus?'1':'0';
				this.dynamicStatus = !this.dynamicStatus;
				hideDynamic({
					id: dynamic.id,
					status: status
				}).then(res => {}).catch(res => {
					this.$utils.toast(res);
				})
			}
		}
	};
</script>

<style scoped>
	.tui-product__item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 28rpx;
		overflow: hidden;
		transition: all 0.15s linear;
		border: 1rpx solid #cccccc47;
	}

	.tui-product__img {
		position: relative;
		width: 100%;
		display: block;
		background-color: #F1F1F1;
	}

	.tui-product__address {

		background-color: #2e2e2e5c;
		position: absolute;
		bottom: 20rpx;
		left: 16rpx;
		border-radius: 160rpx;
	}
    
   .tagC{
	   padding:5px 8px; 
	   background: rgba(0,0,0,0.3);
	   position: absolute;
	   bottom: 20rpx;
	   left: 16rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		font-size: 20rpx;
	    color: #FFFFFF;
	   border-radius: 160rpx;
   }
	.tui-product__address text {
		font-size: 20rpx;
		color: #fff;
		margin-left: 8rpx;
	}

	.tui-product__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-product__title {
		color: #2e2e2e;
		font-size: 30rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: 600;
		margin-bottom: 18rpx;
	}

	/* 头像 */
	.u-nickname__img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
	}
	
	.icon-small {
		width: 30rpx;
		height: 30rpx;
	}
	
	.tui-tag {
		line-height: unset;
	}
	
	.icon_yincang{
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0,0,0,0.3);
		width: 64rpx;
		height: 45rpx;
		border-bottom-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>